<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head :: head"></head>

<style type="text/css">
    select option {
        width: 260px;
        height: 25px;
        line-height: 25px;
        padding: 5px 5px;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <form id="ec" th:action="@{/admin/assignRole}" method="post" class="form-horizontal">
            <input type="hidden" name="adminId" th:value="${adminId}">
            <input type="hidden" name="roleIds" id="roleIds" value="">
            <div style="text-align: center;padding-left: 20px;">
                <div id="s1" style="float: left;">
                    <div style="font-weight:900;">未选择</div>
                    <select id="select1" multiple="multiple" style="width: 220px;height: 280px;overflow-y:auto;"
                            ondblclick="funRight()">
                        <option th:each="item: ${unAssignRoleList}" th:value="${item.id}" th:text="${item.roleName}">
                            11
                        </option>
                    </select>
                </div>
                <div style="float: left;padding-top:120px;">
                    <br/>
                    <button type="button" id="right"> &gt;&gt;</button>
                    <br/><br/>

                    <button type="button" id="left"> &lt;&lt;</button>

                </div>
                <div id="s2" style="float: left;">
                    <div style="font-weight:900;">已选择</div>
                    <select id="select2" multiple="multiple" style="width: 220px;height: 280px;overflow-y:auto;"
                            ondblclick="funLeft()">
                        <option th:each="item: ${assignRoleList}" th:value="${item.id}" th:text="${item.roleName}">11
                        </option>
                    </select>
                </div>

                <div class="form-group" style="clear: left;padding-top: 20px;">
                    <button type="button" class="btn btn-sm btn-primary " onclick="add()" style="margin-left: 10px;">
                        保存
                    </button>
                    <button type="button" class="btn btn-sm btn-primary " onclick="cancel()" style="margin-left: 10px;">
                        重置
                    </button>
                    <button class="btn btn-sm btn-white" type="button" onclick="javascript:opt.closeWin();" value="取消">
                        取消
                    </button>
                </div>
                <br/>
            </div>
        </form>
    </div>
</div>
<script th:inline="javascript">
    $(function () {
        $("#right").on("click", function () {
            $("#select1 option").each(function (index, item) {
                if (item.selected == true) {
                    document.getElementById("select2").appendChild(item);
                }
            });
        });

        $("#left").on("click", function () {
            $("#select2 option").each(function (index, item) {
                if (item.selected == true) {
                    document.getElementById("select1").appendChild(item);

                }
            });
        });
    });

    function funRight() {
        $("#right").trigger("click");
    }

    function funLeft() {
        $("#left").trigger("click");
    }

    function add() {
        var roleIds = "";
        for (let i = 0; i < $("#select2 option").length; i++) {
            if (i < $("#select2 option").length - 1) {
                roleIds += $("#select2 option")[i].value + ",";
            } else {
                roleIds += $("#select2 option")[i].value
            }
        }
        $("#roleIds").val(roleIds);
        document.forms.ec.submit();

    }

    function cancel() {

        location.reload();

    }
</script>
</body>
</html>